<div class="ui-g-12" style="padding: 0px;height:100%;width:100%;">
    <p-table #dt [style]="{'margin-top': '-1px', 'width':'100%'}" [value]="records" [resizableColumns]="true" [scrollable]="true"
        [scrollHeight]="'calc(100% - 20px)'" [paginator]="showPaginator" [responsive]="true" [loading]="loading"
        [totalRecords]="totalRecords" [rows]="pageSize" [globalFilterFields]='cols'>
        <ng-template pTemplate="caption">
            <div style="text-align: right">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="50" placeholder="查找过滤"
                    (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
            </div>
        </ng-template>
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of cols" [ngStyle]="{width: col.width + 'px'}">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header">
            <tr *ngFor="let header of headers">
                <th *ngFor="let col of header" [attr.rowspan]="col.rowspan" [attr.colspan]="col.colspan"
                    [ngStyle]="{'white-space':'nowrap', 'text-align':'center'}">
                    {{col.name}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
            <tr>
                <td *ngFor="let col of cols" [ngStyle]="{'white-space':'nowrap', 'text-align': col.textAlign}">
                    {{rowData[col.fieldName]}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="paginatorleft" let-state>
            第{{state.page + 1}} / {{state.totalRecords/state.rows | mathceil}}页
        </ng-template>
        <ng-template pTemplate="paginatorright" let-state>
            共{{state.totalRecords}}条
        </ng-template>
    </p-table>
</div>